{% load mptt_tags static %}
<div class="nested-comments" id="article_comment">
    {% recursetree article.comments.all %}
        <ul id="comment-thread-{{ node.pk }}">
            <li class="card border-0">
                <div class="row">
                    <div class="col-md-2">
                        <img src="{{ node.author.profile.avatar.url }}"
                             style="width: 120px;height: 120px;object-fit: cover;" alt="{{ node.author }}"/>
                    </div>
                    <div class="col-md-10">
                        <div class="card-body">
                            <h6 class="card-title">
                                <a href="{{ node.author.profile.get_absolute_url }}">{{ node.author }}</a>
                            </h6>
                            <p class="card-text">
                                {{ node.content }}
                            </p>
                            <a class="btn btn-sm btn-dark btn-reply" href="#commentForm" data-comment-id="{{ node.pk }}"
                               data-comment-username="{{ node.author }}">Ответить</a>
                            <hr/>
                            <time>{{ node.time_create }}</time>
                        </div>
                    </div>
                </div>
            </li>
            {% if not node.is_leaf_node %}
                {{ children }}
            {% endif %}
        </ul>
    {% endrecursetree %}
    <div class="card border-0">
        <div class="card-body">
            <h6 class="card-title">
                Форма добавления комментария
            </h6>
            <form method="post" action="{% url 'blog_app:comment_create_view' article.pk %}" id="commentForm"
                  name="commentForm" data-article-id="{{ article.pk }}">
                {% csrf_token %}
                {{ form }}
                <div class="d-grid gap-2 d-md-block mt-2">
                    <button type="submit" class="btn btn-dark" id="commentSubmit">Добавить комментарий</button>
                </div>
            </form>
        </div>
    </div>
</div><!-- End blog comments -->

{% block script %}
    <script src="{% static 'custom/js/backend.js' %}"></script>
    <script src="{% static 'custom/js/comments.js' %}"></script>
{% endblock %}